<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>z-UI-alert</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-alert/css/z-UI.alert.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-tab/css/z-UI.tab.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="z-UI.js"></script>
    <script type="text/javascript" src="z-UI-alert/js/z-UI.alert.js"></script>
    <script type="text/javascript" src="z-UI-tab/js/z-UI.tab.js"></script>
</head>
<body class="zUI-app">
<div class="zUI-full" style="padding: 20px;overflow-y: auto">
    <span class="zUI-strik line1">鼠标悬浮层提示</span>
    <div class="zUI-card" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">普通悬浮层</div>
        </div>
        <div class="zUI-card-wrap">
            <a class="zUI-btn info" id="btn1" zUI-title="向左弹出提示">向左</a>
            <a class="zUI-btn info" id="btn2" zUI-title="向右弹出提示">向右</a>
            <a class="zUI-btn info" id="btn3" zUI-title="向上弹出提示">向上</a>
            <a class="zUI-btn info" id="btn4" zUI-title="向下弹出提示">向下</a>
            <a class="zUI-btn info" id="btn5" zUI-title="点击按钮或者重新移入鼠标" zUI-title-stay="true">弹出保留</a><br><br>
            <div class="zUI-card" zUI-folder="hide" style="width: 100%;">
                <div class="zUI-card-title">
                    <div class="text">查看代码</div>
                </div>
                <div class="zUI-card-wrap">
                    <pre class="zUI-code" id="code1"></pre>
                </div>
            </div>
        </div>
    </div>
    <div class="zUI-card" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">html悬浮层</div>
        </div>
        <div class="zUI-card-wrap">

            <a class="zUI-btn info" id="btn6" zUI-title="#function:hoverHtml1#" zUI-title-stay="true">弹出html1</a>
            <a class="zUI-btn info" id="btn7" zUI-title="#function:hoverHtml2#" zUI-title-stay="true">弹出html2</a><br><br>
            <div class="zUI-card" zUI-folder="hide" style="width: 100%;">
                <div class="zUI-card-title">
                    <div class="text">查看代码</div>
                </div>
                <div class="zUI-card-wrap">
                    <pre class="zUI-code" id="code2"></pre>
                </div>
            </div>
        </div>
    </div>
    <span class="zUI-strik line1">顶部信息提示</span>
    <a class="zUI-btn info" onclick="zUI.dialog.message({content:'保存成功'+(++i),timer:false,delay:5000,close:false,title:'提示'});">5秒自动消失的提示</a>
    <a class="zUI-btn info" onclick="zUI.dialog.message({content:'带关闭按钮的提示'+(++i),timer:false,delay:3000,level:'error'});">带关闭按钮的提示</a>
    <a class="zUI-btn info" onclick="zUI.dialog.message({content:'保存成功'+(++i),level:'warn',delay:3000,title:'提示'});">带进度条的提示</a>
    <a class="zUI-btn success" onclick="zUI.dialog.message({content:'保存成功'+(++i),timer:false,level:'success'});">success提示</a>
    <a class="zUI-btn info" onclick="zUI.dialog.message({content:'会话已超时'+(++i),level:'info',delay:3000});">info提示</a>
    <a class="zUI-btn warn" onclick="zUI.dialog.message({content:'会话已超时'+(++i),timer:false,level:'warn'});">warn提示</a>
    <a class="zUI-btn danger" onclick="zUI.dialog.message({content:'操作失败操作失败操作失败操作失败操作失败操作失败'+(++i),level:'error',dir:'center',delay:3000});">error提示</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="zUI-btn info" onclick="zUI.dialog.message({content:'操作失败'+(++i),timer:false,delay:3000,level:arr[i%4],dir:'right'});">右边弹出</a><br><br>
    <div class="zUI-card" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code3"></pre>
        </div>
    </div>





</div>
</body>

<script>
    var i = 1;
    var arr = ['info','warn','error','success'];
    function hoverHtml1(){
        var obj = zUI.dom.createElem({name:'div',html:'<h1>我是html1</h1>'});
        return obj;
    }
    function hoverHtml2(){
        return '<div><h1>我是html2</h1></div>';
    }
    zUI.onLoad(function(){
        zUI.code.render({
            elem:'#code1',
            value: "<a class='zUI-btn info' id='btn1' zUI-title='向左弹出提示'>向左</a>\n" +
                "<a class='zUI-btn info' id='btn2' zUI-title='向右弹出提示'>向右</a>\n" +
                "<a class='zUI-btn info' id='btn3' zUI-title='向上弹出提示'>向上</a>\n" +
                "<a class='zUI-btn info' id='btn4' zUI-title='向下弹出提示'>向下</a>\n" +
                "<a class='zUI-btn info' id='btn5' zUI-title='点击按钮或者重新移入鼠标' zUI-title-stay='true'>弹出保留</a>\n\n" +
                "zUI.dialog.hoverTip({elem:'#btn1',dir:'left'});\n" +
                "zUI.dialog.hoverTip({elem:'#btn2',dir:'right'});\n" +
                "zUI.dialog.hoverTip({elem:'#btn3',dir:'up'});\n" +
                "zUI.dialog.hoverTip({elem:'#btn4',dir:'down'});\n" +
                "zUI.dialog.hoverTip({elem:'#btn5',dir:'down'});\n" +
                "zUI.dialog.hoverTip({elem:'#btn6',dir:'up'});\n" +
                "zUI.dialog.hoverTip({elem:'#btn7',dir:'down'});"
        });
        zUI.code.render({
            elem:'#code2',
            value: "<a class='zUI-btn info' id='btn6' zUI-title='#function:hoverHtml1#' zUI-title-stay='true'>弹出html1</a>\n" +
                "<a class='zUI-btn info' id='btn7' zUI-title='#function:hoverHtml2#' zUI-title-stay='true'>弹出html2</a>"
        });
        zUI.code.render({
            elem:'#code3',
            value: "//5秒自动消失的提示\n" +
                "zUI.dialog.message({content:'保存成功'+(++i),timer:false,delay:5000,close:false});\n" +
                "/**\n" +
                " * 带关闭按钮的提示\n" +
                " */\n" +
                "zUI.dialog.message({content:'带关闭按钮的提示'+(++i),timer:false,delay:3000,level:'error'});\n" +
                "//带进度条的提示\n" +
                "zUI.dialog.message({content:'保存成功'+(++i),level:'warn'});\n" +
                "zUI.dialog.message({content:'保存成功'+(++i),timer:false,level:'success'});\n" +
                "zUI.dialog.message({content:'会话已超时'+(++i),level:'info',delay:3000});\n" +
                "zUI.dialog.message({content:'会话已超时'+(++i),timer:false,level:'warn'});\n" +
                "zUI.dialog.message({content:'操作失败操作失败操作失败操作失败操作失败操作失败'+(++i),level:'error',dir:'center',delay:3000});\n" +
                "zUI.dialog.message({content:'操作失败'+(++i),timer:false,delay:3000,level:arr[i%4],dir:'right'});//右边弹出"
        });
        zUI.dialog.hoverTip({elem:'#btn1',dir:'left'});
        zUI.dialog.hoverTip({elem:'#btn2',dir:'right'});
        zUI.dialog.hoverTip({elem:'#btn3',dir:'up'});
        zUI.dialog.hoverTip({elem:'#btn4',dir:'down'});
        zUI.dialog.hoverTip({elem:'#btn5',dir:'down'});
        zUI.dialog.hoverTip({elem:'#btn6',dir:'up'});
        zUI.dialog.hoverTip({elem:'#btn7',dir:'down'});
        zUI.tab.loadPanel({
            elem:'.zUI-card'
        });
    });

</script>


</html>